<!DOCTYPE html>
<html lang="en">
	<head>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0" maximum-scale=1">
	  <title>Web GUI</title>
	  <link rel="stylesheet" href="css/styles.css">
	  <link rel="stylesheet" href="css/bootstrapSwitch.css">
	  <link rel="stylesheet" href="css/main.css">
	</head>

	<body>
		<nav class="top-bar">
  <ul class="title-area">
    <!-- Title Area -->
    <li class="name">
      <h1><a href="#">Top Bar Title </a></h1>
    </li>
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Left Nav Section -->
    <ul class="left">
      <li class="divider"></li>
      <li class="active"><a href="#">Main Item 1</a></li>
      <li class="divider"></li>
      <li><a href="#">Main Item 2</a></li>
      <li class="divider"></li>
      <li class="has-dropdown"><a href="#">Main Item 3</a>

        <ul class="dropdown">
          <li class="has-dropdown"><a href="#">Dropdown Level 1a</a>

            <ul class="dropdown">
              <li><label>Dropdown Level 2 Label</label></li>
              <li><a href="#">Dropdown Level 2a</a></li>
              <li><a href="#">Dropdown Level 2b</a></li>
              <li class="has-dropdown"><a href="#">Dropdown Level 2c</a>

                <ul class="dropdown">
                  <li><label>Dropdown Level 3 Label</label></li>
                  <li><a href="#">Dropdown Level 3a</a></li>
                  <li><a href="#">Dropdown Level 3b</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Dropdown Level 3c</a></li>
                </ul>
              </li>
              <li><a href="#">Dropdown Level 2d</a></li>
              <li><a href="#">Dropdown Level 2e</a></li>
              <li><a href="#">Dropdown Level 2f</a></li>
            </ul>
          </li>
          <li><a href="#">Dropdown Level 1b</a></li>
          <li><a href="#">Dropdown Level 1c</a></li>
          <li class="divider"></li>
          <li><a href="#">Dropdown Level 1d</a></li>
          <li><a href="#">Dropdown Level 1e</a></li>
          <li><a href="#">Dropdown Level 1f</a></li>
          <li class="divider"></li>
          <li><a href="#">See all &rarr;</a></li>
        </ul>
      </li>
      <li class="divider"></li>
    </ul>

    <!-- Right Nav Section -->
    <ul class="right">
      <li class="divider hide-for-small"></li>
      <li class="has-dropdown"><a href="#">Main Item 4</a>

        <ul class="dropdown">
          <li><label>Dropdown Level 1 Label</label></li>
          <li class="has-dropdown"><a href="#" class="">Dropdown Level 1a</a>

            <ul class="dropdown">
              <li><a href="#">Dropdown Level 2a</a></li>
              <li><a href="#">Dropdown Level 2b</a></li>
              <li class="has-dropdown"><a href="#">Dropdown Level 2c</a>

                <ul class="dropdown">
                  <li><a href="#">Dropdown Level 3a</a></li>
                  <li><a href="#">Dropdown Level 3b</a></li>
                  <li><a href="#">Dropdown Level 3c</a></li>
                </ul>
              </li>
              <li><a href="#">Dropdown Level 2d</a></li>
              <li><a href="#">Dropdown Level 2e</a></li>
              <li><a href="#">Dropdown Level 2f</a></li>
            </ul>
          </li>
          <li><a href="#">Dropdown Level 1b</a></li>
          <li><a href="#">Dropdown Level 1c</a></li>
          <li class="divider"></li>
          <li><label>Dropdown Level 1 Label</label></li>
          <li><a href="#">Dropdown Level 1d</a></li>
          <li><a href="#">Dropdown Level 1e</a></li>
          <li><a href="#">Dropdown Level 1f</a></li>
          <li class="divider"></li>
          <li><a href="#">See all &rarr;</a></li>
        </ul>
      </li>
      <li class="divider"></li>
      <li class="has-form">
        <form>
          <div class="row collapse">
            <div class="small-8 columns">
              <input type="text">
            </div>
            <div class="small-4 columns">
              <a href="#" class="alert button">Search</a>
            </div>
          </div>
        </form>
      </li>
      <li class="divider show-for-small"></li>
      <li class="has-form">
        <a class="button" href="#">Button!</a>
      </li>
    </ul>
  </section>
</nav>

<!-- a simple div with some links -->
<div class="breadcrumb">
  <a href="#" class="active">Browse</a>
  <a href="#">Compare</a>
  <a href="#">Order Confirmation</a>
  <a href="#">Checkout</a>
</div>
<br /><br />
<!-- another version - flat style with animated hover effect -->
<div class="breadcrumb flat">
  <a href="#" class="active">Browse</a>
  <a href="#">Compare</a>
  <a href="#">Order Confirmation</a>
  <a href="#">Checkout</a>
</div>

 		  <div class="row">
		    <div class="large-4 columns">
		    	<table id="list-view"></table>
		    </div>
		    <div class="large-8 columns">
					<section id="todoapp">
						<div id="main" class="form-inline">
							<button id="new-todo" class="tiny button">New</button>
							<input id="toggle-all" type="checkbox">
							<label for="toggle-all">Mark all as complete</label>
						</div>
			    	<div id="item-detail-view"></div>
						<footer id="footer"></footer>
					</section>
		    </div>
		  </div>

		<script type="text/template" id="list-view-template">
		</script>

		<script type="text/template" id="list-item-template">
			<td>
				<div class="form-inline">
					<input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>
					<label><%- name %> (<%= text %>)</label>
					<button class="destroy tiny button secondary">Del</button>
				</div>
			</td>
		</script>
		
		<script type="text/template" id="item-detail-template">
			<div class="item-title"><%= name %></div>
			<div class="item-text"><%= text %></b></div>
		</script>
		
		<script type="text/template" id="stats-template">
			<span id="todo-count"><strong><%= remaining %></strong> <%= remaining === 1 ? 'item' : 'items' %> left</span>
			<ul id="filters">
				<li><a class="selected" href="#/">All</a></li>
				<li><a href="#/active">Active</a></li>
				<li><a href="#/completed">Completed</a></li>
			</ul>
			<% if (completed) { %>
			<button id="clear-completed">Clear completed (<%= completed %>)</button>
			<% } %>
		</script>
		
		<script type="text/template" id="form-template">
			<div class="modal large reveal-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			  <div class="modal-header">
			  	<a class="close-reveal-modal">&#215;</a>
			    <h3 id="myModalLabel">_h</h3>
			  </div>
			  <div class="modal-body">
			    <form class="form-horizontal">
			    	<%= body %>
			    </form>
			  </div>
			  <div class="modal-footer right">
			    <button class="dlg-close small button secondary" data-dismiss="modal" aria-hidden="true">Close</button>
			    <button class="dlg-save small button">Save changes</button>
			  </div>
			</div>
		</script>

	  <script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
	  <script type="text/javascript" src="js/libs/jquery-io.js"></script>
	  <script type="text/javascript" src="js/libs/require.js"></script>
		<script type="text/javascript" src="js/main.js"></script>
	</body>
</html>
